<template>
  <div class="hero-website-startup">
    <div class="header-type-1">
      <div class="header-type-12">
        <div class="pateern">
          <div class="mask">
            <div class="mask2"></div>
            <div class="mask2"></div>
            <div class="mask3"></div>
          </div>
        </div>
        <div class="header">
          <div class="rectangle"></div>
          <div class="wiredunk">FILMACTION</div>
          <div class="button-let-talk">
            <div class="rectangle2"></div>
            <div class="services">Search</div>
          </div>
          <svg
            class="menu"
            width="40"
            height="40"
            viewBox="0 0 40 40"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8 11H32V13H8V11ZM8 27H32V29H8V27ZM32 19H8V21H32V19Z"
              fill="white"
            />
          </svg>

          <svg
            class="vector"
            width="18"
            height="16"
            viewBox="0 0 18 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4 0V16M14 0V16M0 4H4M9 8L18 4M0 8H18M0 12H4M14 12H18M1 16H17C17.2652 16 17.5196 15.8946 17.7071 15.7071C17.8946 15.5196 18 15.2652 18 15V1C18 0.734784 17.8946 0.48043 17.7071 0.292893C17.5196 0.105357 17.2652 0 17 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V15C0 15.2652 0.105357 15.5196 0.292893 15.7071C0.48043 15.8946 0.734784 16 1 16Z"
              stroke="white"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          <svg
            class="arrow-left"
            width="36"
            height="33"
            viewBox="0 0 36 33"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4.5 16.5H31.5M15 26.125L4.5 16.5L15 26.125ZM4.5 16.5L15 6.875L4.5 16.5Z"
              stroke="white"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
      </div>
    </div>
    <div class="easy-way-to-create-b">生 成 数 字 人</div>
    <svg
      class="ic-search"
      width="114"
      height="24"
      viewBox="0 0 114 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M108.5 13H107.71L107.43 12.73C108.41 11.59 109 10.11 109 8.5C109 4.91 106.09 2 102.5 2C98.91 2 96 4.91 96 8.5C96 12.09 98.91 15 102.5 15C104.11 15 105.59 14.41 106.73 13.43L107 13.71V14.5L112 19.49L113.49 18L108.5 13ZM102.5 13C100.01 13 98 10.99 98 8.5C98 6.01 100.01 4 102.5 4C104.99 4 107 6.01 107 8.5C107 10.99 104.99 13 102.5 13Z"
        fill="white"
      />
    </svg>

    <div class="_2019-mahameru">© 2023. Filmaction</div>
    <div class="group-4163">
      <div class="rectangle5"></div>
      <div class="text">女性、男性、孩童、老人....</div>
      <div class="ap">形象选择</div>
    </div>
    <div class="group-7341">
      <div class="rectangle6"></div>
      <div class="text2">普通话、英文、法语、西班牙语....</div>
      <div class="ap2">语言选择</div>
      <svg
        class="chevron-down"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M6 9L12 15L18 9"
          stroke="black"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
    <div class="group-7342">
      <div class="rectangle7"></div>
      <div class="text3">成熟男声、成熟女声、广播音、儿童音...</div>
      <div class="ap3">声音选择</div>
      <svg
        class="chevron-down2"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M6 9L12 15L18 9"
          stroke="black"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
    <div class="group-7343">
      <div class="rectangle8"></div>
      <div class="text4">钢琴曲、纯音乐、管弦乐、爵士、</div>
      <div class="ap4">音乐选择</div>
      <div class="ap5">形象上传</div>
      <div class="ap6">音乐上传</div>
      <svg
        class="chevron-down3"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M6 9L12 15L18 9"
          stroke="black"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
    <svg
      class="chevron-down4"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M6 9L12 15L18 9"
        stroke="black"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>

    <div class="group-7314">
      <div class="rectangle9"></div>
      <div class="ap7">画面呈现</div>
      <div class="ic-user">
        <div class="rectangle10"></div>
      </div>
    </div>
    <div class="button">
      <router-link to="/result_person" class="ap8">生成</router-link>
    </div>
    <svg
      class="user"
      width="275"
      height="275"
      viewBox="0 0 275 275"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M183.333 80.2083C183.333 92.3641 178.504 104.022 169.909 112.617C161.313 121.213 149.656 126.042 137.5 126.042C125.344 126.042 113.686 121.213 105.091 112.617C96.4954 104.022 91.6665 92.3641 91.6665 80.2083C91.6665 68.0526 96.4954 56.3947 105.091 47.7993C113.686 39.2039 125.344 34.375 137.5 34.375C149.656 34.375 161.313 39.2039 169.909 47.7993C178.504 56.3947 183.333 68.0526 183.333 80.2083V80.2083ZM137.5 160.417C116.227 160.417 95.826 168.867 80.784 183.909C65.742 198.951 57.2915 219.352 57.2915 240.625H217.708C217.708 219.352 209.258 198.951 194.216 183.909C179.174 168.867 158.772 160.417 137.5 160.417V160.417Z"
        stroke="#1036FF"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>

    <svg
      class="frame"
      width="133"
      height="135"
      viewBox="0 0 133 135"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M26.5998 20.25C23.0724 20.25 19.6895 21.6723 17.1953 24.2041C14.7011 26.7358 13.2998 30.1696 13.2998 33.75V101.25C13.2998 104.83 14.7011 108.264 17.1953 110.796C19.6895 113.328 23.0724 114.75 26.5998 114.75H106.4C109.927 114.75 113.31 113.328 115.804 110.796C118.299 108.264 119.7 104.83 119.7 101.25V33.75C119.7 30.1696 118.299 26.7358 115.804 24.2041C113.31 21.6723 109.927 20.25 106.4 20.25H26.5998ZM106.4 101.25H26.5998L53.1998 47.25L73.1498 87.75L86.4498 60.75L106.4 101.25Z"
        fill="#567DF4"
      />
    </svg>

    <svg
      class="adjustment-filter"
      width="119"
      height="119"
      viewBox="0 0 119 119"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M59.5002 29.7502V19.8335M59.5002 29.7502C56.8701 29.7502 54.3478 30.795 52.488 32.6547C50.6283 34.5144 49.5835 37.0368 49.5835 39.6668C49.5835 42.2969 50.6283 44.8192 52.488 46.679C54.3478 48.5387 56.8701 49.5835 59.5002 49.5835M59.5002 29.7502C62.1302 29.7502 64.6526 30.795 66.5123 32.6547C68.372 34.5144 69.4168 37.0368 69.4168 39.6668C69.4168 42.2969 68.372 44.8192 66.5123 46.679C64.6526 48.5387 62.1302 49.5835 59.5002 49.5835M59.5002 49.5835V99.1668M29.7502 89.2502C32.3802 89.2502 34.9026 88.2054 36.7623 86.3456C38.622 84.4859 39.6668 81.9636 39.6668 79.3335C39.6668 76.7034 38.622 74.1811 36.7623 72.3214C34.9026 70.4616 32.3802 69.4168 29.7502 69.4168M29.7502 89.2502C27.1201 89.2502 24.5978 88.2054 22.738 86.3456C20.8783 84.4859 19.8335 81.9636 19.8335 79.3335C19.8335 76.7034 20.8783 74.1811 22.738 72.3214C24.5978 70.4616 27.1201 69.4168 29.7502 69.4168M29.7502 89.2502V99.1668M29.7502 69.4168V19.8335M89.2502 89.2502C91.8802 89.2502 94.4026 88.2054 96.2623 86.3456C98.122 84.4859 99.1668 81.9636 99.1668 79.3335C99.1668 76.7034 98.122 74.1811 96.2623 72.3214C94.4026 70.4616 91.8802 69.4168 89.2502 69.4168M89.2502 89.2502C86.6201 89.2502 84.0978 88.2054 82.238 86.3456C80.3783 84.4859 79.3335 81.9636 79.3335 79.3335C79.3335 76.7034 80.3783 74.1811 82.238 72.3214C84.0978 70.4616 86.6201 69.4168 89.2502 69.4168M89.2502 89.2502V99.1668M89.2502 69.4168V19.8335"
        stroke="#567DF4"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </div>
</template>
<script>
/* Code generated with AutoHTML Plugin for Figma */

export default {
  name: "HeroWebsiteStartup",
  components: {},
  props: {},
  data() {
    // quickfix to have components available to pass as props
    return {};
  },
};
</script>
<style scoped>
.hero-website-startup,
.hero-website-startup * {
  box-sizing: border-box;
}
.hero-website-startup {
  background: #ffffff;
  width: 1440px;
  height: 800px;
  position: relative;
  overflow: hidden;
}
.header-type-1 {
  position: absolute;
  inset: 0;
}
.header-type-12 {
  width: 1440px;
  height: 95px;
  position: static;
}
.pateern {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask2 {
  background: #3056d3;
  width: 1440px;
  height: 83px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.mask3 {
  background: #000000;
  border-radius: 130px;
  opacity: 0.10000000149011612;
  width: 1793.68px;
  height: 1184.35px;
  position: absolute;
  left: -1435.28px;
  top: 70.79px;
  transform-origin: 0 0;
  transform: rotate(-45deg) scale(1.413, 0.051);
}
.header {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 15px;
  overflow: hidden;
}
.rectangle {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.wiredunk {
  color: #ffffff;
  text-align: left;
  font: 700 24px "Montserrat", sans-serif;
  position: absolute;
  left: 131px;
  top: calc(50% - 26px);
}
.button-let-talk {
  width: 142px;
  height: 38px;
  position: absolute;
  left: 1131px;
  top: 11px;
  overflow: hidden;
}
.rectangle2 {
  background: #ffffff;
  border-radius: 30px;
  opacity: 0.10000000149011612;
  width: 142px;
  height: 38px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.services {
  color: #ffffff;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 44px;
  top: 9px;
}
.menu {
  position: absolute;
  left: 1353px;
  top: 9px;
  overflow: visible;
}
.vector {
  position: absolute;
  left: 101px;
  top: 21px;
  overflow: visible;
}
.arrow-left {
  position: absolute;
  left: 25px;
  top: 13px;
  overflow: visible;
}
.easy-way-to-create-b {
  color: #212b36;
  text-align: left;
  font: 600 48px "Montserrat", sans-serif;
  position: absolute;
  left: 535px;
  top: calc(50% - 235px);
  width: 482px;
}
.ic-search {
  position: absolute;
  left: 1216px;
  top: 34px;
  overflow: visible;
}
._2019-mahameru {
  color: #a78585;
  text-align: left;
  font: 400 10px/24px "Open Sans", sans-serif;
  position: absolute;
  left: 675px;
  top: calc(50% - -350px);
}
.group-4163 {
  position: absolute;
  inset: 0;
}
.rectangle5 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 171px;
  top: 293px;
}
.text {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Abhaya Libre Medium", sans-serif;
  position: absolute;
  left: 188px;
  top: 307px;
}
.ap {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Abhaya Libre Medium", sans-serif;
  position: absolute;
  left: 178px;
  top: 268px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.group-7341 {
  position: absolute;
  inset: 0;
}
.rectangle6 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 171px;
  top: 388px;
}
.text2 {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Inter", sans-serif;
  position: absolute;
  left: 188px;
  top: 402px;
}
.ap2 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Abhaya Libre Medium", sans-serif;
  position: absolute;
  left: 178px;
  top: 363px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.chevron-down {
  position: absolute;
  left: 458px;
  top: 401px;
  overflow: visible;
}
.group-7342 {
  position: absolute;
  inset: 0;
}
.rectangle7 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 171px;
  top: 483px;
}
.text3 {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Inter", sans-serif;
  position: absolute;
  left: 188px;
  top: 497px;
}
.ap3 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Abhaya Libre Medium", sans-serif;
  position: absolute;
  left: 178px;
  top: 458px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.chevron-down2 {
  position: absolute;
  left: 458px;
  top: 496px;
  overflow: visible;
}
.group-7343 {
  position: absolute;
  inset: 0;
}
.rectangle8 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 546px;
  top: 293px;
}
.text4 {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Inter", sans-serif;
  position: absolute;
  left: 563px;
  top: 307px;
}
.ap4 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Abhaya Libre Medium", sans-serif;
  position: absolute;
  left: 553px;
  top: 268px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.ap5 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Abhaya Libre Medium", sans-serif;
  position: absolute;
  left: 553px;
  top: 391px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.ap6 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Abhaya Libre Medium", sans-serif;
  position: absolute;
  left: 703px;
  top: 390px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.chevron-down3 {
  position: absolute;
  left: 833px;
  top: 306px;
  overflow: visible;
}
.chevron-down4 {
  position: absolute;
  left: 458px;
  top: 307px;
  overflow: visible;
}
.group-7314 {
  position: absolute;
  inset: 0;
}
.rectangle9 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 268.88px;
  position: absolute;
  left: 937px;
  top: 287.12px;
}
.ap7 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Inter", sans-serif;
  position: absolute;
  left: 944px;
  top: 236px;
  width: 56px;
  height: 32.19px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.ic-user {
  width: 270px;
  height: 270px;
  position: static;
}
.rectangle10 {
  width: 270px;
  height: 270px;
  position: absolute;
  left: 964px;
  top: 319px;
}
.button {
  background: var(--_01, #567df4);
  border-radius: 10px;
  width: 327px;
  height: 54px;
  position: absolute;
  left: 557px;
  top: 622px;
  overflow: hidden;
}
.ap8 {
  color: var(--fffcf-9, #fffcf9);
  text-align: center;
  font: 600 20px/24px "Manrope", sans-serif;
  position: absolute;
  left: 143px;
  top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user {
  position: absolute;
  left: 965px;
  top: 287px;
  overflow: visible;
}
.frame {
  position: absolute;
  left: 535px;
  top: 408px;
  overflow: visible;
}
.adjustment-filter {
  position: absolute;
  left: 681px;
  top: 418px;
  overflow: visible;
}
</style>
